import React, {useState, useEffect} from 'react'
import {Link} from 'react-router-dom'

export default function UseEffectFn() {
  const [count, setCount] = useState(0);
  const [money, setMoney] = useState('10000');
  // 解决了声明周期钩子函数的问题:componentDidMount and componentDidUpdate
  // useEffect的第一个参数是执行的具体内容
  // 第一个参数可以写return,会在componentWillUnmount时自动执行
  // 第二个参数是依赖项,格式是数组.三种情况:1.不写,2.空数组3.数组中有内容
  // 1.不写第二个参数,就表示useEffect会在componentDidMount和componentDidUpdate同时执行
  // 2.第二个参数写成空数组:只在componentDidMount阶段执行
  // 3.第二个参数写有内容的数组,内容就是依赖项,只有对应的依赖变化时,useEffect才会执行

  useEffect(()=> {
    console.log('useEffect');
    document.title = `点击次数:${count}`
    return ()=>{
      console.log('componentWillUnmount');
    }
  }, [money])
  return (
    <div>
      <p>count: {count}</p>
      <p>money: {money}</p>
      <button onClick={()=>setCount(count+1)}>+1</button>
      <button onClick={()=>setMoney(money+5000)}>升值加薪,吃火锅</button>
      <Link to="/useeffectclass">去看看class</Link>
    </div>
  )
}
